<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- Javascript files -->
		<!-- jQuery -->
		<script src="js/jquery.js"></script>
		<!-- Bootstrap JS -->
		<script src="js/bootstrap.min.js"></script>
		<!-- Placeholder JS -->
		<script src="js/placeholder.js"></script>
		<!-- Respond JS for IE8 -->
		<script src="js/respond.min.js"></script>
		<!-- HTML5 Support for IE -->
		<script src="js/html5shiv.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- Font awesome CSS -->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- Main CSS -->
		<link href="css/style-259.css" rel="stylesheet">		
		<link href="css/style.css" rel="stylesheet">		
		<link href="css/icon.css" rel="stylesheet">		
		<!-- Favicon -->
		<link rel="shortcut icon" href="#">
		<!-- Main CSS -->
		<link href="css/style-215.css" rel="stylesheet">
</head>
<style>
	*{margin: 0;padding: 0;}
	body{width:100%;height: 780px;border: 6px solid #063d69;background:url(imgs/timg.png)0 0 repeat;}
	.img{width:750px;height:80px;position:absolute;margin-top:10px;}
	.img img{width:80px;height:80px;margin-left:40px;}
	.biaoti{width:750px;height:40px;position:absolute;margin-top: 100px;}
	.biaoti a{color:#fff;text-decoration:none;line-height:40px;}
	.div{width: 306px;height: 760px;border: 5px solid #fff;border-radius:0px 10px 10px 0px;background-color: #31e0f7;float: left;}
	.div3{width: 81%;height: 550px;border: 5px solid #fff;margin-left: 315px;border-radius: 10px 0px 0px 10px;background-color: #31e0f7;}
	.div4{width: 81%;height: 200px;border: 5px solid #fff;margin-left: 315px;border-radius: 10px 0px 0px 10px;background-color: #31e0f7;margin-top: 10px;}
	.cx{width: 100%;height: 25px;border: 1px solid #fff;}
	.cx span{color: #fff;}
	.table{width: 100%;height: 100%;border-spacing:0;box-sizing: border-box;border-collapse:collapse; position: relative;}
    #big-box tr td{width:200px; height: 190px;border: 2px solid #127897;box-sizing: border-box;}
    .box{width: 100%;height: 100%;}
    .active{position: absolute; top: 0;left: 0; width:100%;height:100%; background: #9adffe;}
    .td{width: 100%;height: 30px;background-color: #308792;}
    .td span{color: #fff;}
    .div input{width: 125px;height: 30px;border-radius: 10px;margin: 10px;background-color: #fff;}
    .sc{width: 100%;height: 30px;background-color: #308792;}
    .sc span{color: #fff;}
    .yt{width: 100%;height: 30px;background-color: #308792;margin-top: -50px;}
    .yt span{color: #fff;}



#sd_overlay {height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 50; display:none;}
#sd_overlaya {height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 50; display:none;}
#sd_overlayb {height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 50; display:none;}
#sd_overlayc {height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 50; display:none;}
* html #sd_overlay {position: absolute;height: expression_r(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
.sd_overlayBG {background:#000;opacity: 0.45;filter:alpha(opacity=45); _background:none;}


.myweb_msg-cache{width:1195px; height:705px; border:1px solid #666; box-shadow:2px 2px 15px #333; background:#fff;position:fixed; top:20%; margin-top:-100px; left:30%; margin-left:-220px; _position:absolute; z-index:1000;display:none;}
.myweb_msg-cache h2{background:#d6f0fd;color:#666; padding:7px 15px;}
.myweb_msg-cache h2 a{margin-top:3px;}

.myweb_msg-cachea{width:1195px; height:705px; border:1px solid #666; box-shadow:2px 2px 15px #333; background:#fff;position:fixed; top:20%; margin-top:-100px; left:30%; margin-left:-220px; _position:absolute; z-index:1000;display:none;}
.myweb_msg-cachea h2{background:#d6f0fd;color:#666; padding:7px 15px;}
.myweb_msg-cachea h2 a{margin-top:3px;}


.myweb_msg-cacheb{width:1195px; height:705px; border:1px solid #666; box-shadow:2px 2px 15px #333; background:#fff;position:fixed; top:20%; margin-top:-100px; left:30%; margin-left:-220px; _position:absolute; z-index:1000;display:none;}
.myweb_msg-cacheb h2{background:#d6f0fd;color:#666; padding:7px 15px;}
.myweb_msg-cacheb h2 a{margin-top:3px;}


.myweb_msg-cachec{width:1195px; height:705px; border:1px solid #666; box-shadow:2px 2px 15px #333; background:#fff;position:fixed; top:20%; margin-top:-100px; left:30%; margin-left:-220px; _position:absolute; z-index:1000;display:none;}
.myweb_msg-cachec h2{background:#d6f0fd;color:#666; padding:7px 15px;}
.myweb_msg-cachec h2 a{margin-top:3px;}



.msg-box-cache{padding:10px 0;}
/*.user_msg-closebtn{background:url(close.gif) no-repeat;}*/
.msg-box-cache dt{float:left; font-size:15px; font-weight:bold; width:100px; text-align:right; line-height:25px;}
.msg-box-cache dd{text-align:left;font-weight:bold; line-height:25px; width:300px; float:left;}
.msg-box-cache dd select{margin-left:10px;}
.msg-box-cache dd input{vertical-align:middle; margin-left:10px; margin-right:5px;}
.msg-box-cache dl{clear:both; padding:10px 15px; border-bottom:1px solid #f6f6f6; height:590px;}

.msg-box-cachea{padding:10px 0;}
/*.user_msg-closebtn{background:url(close.gif) no-repeat;}*/
.msg-box-cachea dt{float:left; font-size:15px; font-weight:bold; width:100px; text-align:right; line-height:25px;}
.msg-box-cachea dd{text-align:left;font-weight:bold; line-height:25px; width:300px; float:left;}
.msg-box-cachea dd select{margin-left:10px;}
.msg-box-cachea dd input{vertical-align:middle; margin-left:10px; margin-right:5px;}
.msg-box-cachea dl{clear:both; padding:10px 15px; border-bottom:1px solid #f6f6f6; height:590px;}

.msg-box-cacheb{padding:10px 0;}
/*.user_msg-closebtn{background:url(close.gif) no-repeat;}*/
.msg-box-cacheb dt{float:left; font-size:15px; font-weight:bold; width:100px; text-align:right; line-height:25px;}
.msg-box-cacheb dd{text-align:left;font-weight:bold; line-height:25px; width:300px; float:left;}
.msg-box-cacheb dd select{margin-left:10px;}
.msg-box-cacheb dd input{vertical-align:middle; margin-left:10px; margin-right:5px;}
.msg-box-cacheb dl{clear:both; padding:10px 15px; border-bottom:1px solid #f6f6f6; height:590px;}

.msg-box-cachec{padding:10px 0;}
/*.user_msg-closebtn{background:url(close.gif) no-repeat;}*/
.msg-box-cachec dt{float:left; font-size:15px; font-weight:bold; width:100px; text-align:right; line-height:25px;}
.msg-box-cachec dd{text-align:left;font-weight:bold; line-height:25px; width:300px; float:left;}
.msg-box-cachec dd select{margin-left:10px;}
.msg-box-cachec dd input{vertical-align:middle; margin-left:10px; margin-right:5px;}
.msg-box-cachec dl{clear:both; padding:10px 15px; border-bottom:1px solid #f6f6f6; height:590px;}
</style>
<body>
<div class="div">
    <div class="td">
    	<span>通道控制</span>
    </div>
    <input type="button" name="" value="录像">
    <input type="button" name="" value="全录">
    <input type="button" name="" value="抓拍">
    <input type="button" name="" value="回放">
    <input type="button" name="" value="对话">
    <input type="button" name="" value="监听">
    <div class="sc">
    	<span>色彩调节</span>
    </div>
    <div class="ui-215">
			<!-- Details -->
			<div class="ui-details clearfix">	
				<!-- Heading -->
				<h3><a href="#"><i class="fa fa-android bg-green"></i> &nbsp;色彩</a></h3>
				<!-- Progress -->
				<a href="#" class="progress">
					<!-- Progress Bar -->
					<span class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
					</span>
					<!-- Arrow -->
					<span class="ui-hover">
						<!-- Heading -->
						<span class="ui-head">色彩</span>
						<!-- Progress Reading -->
						<b>60%</b>
					</span>
				</a>
			</div>
			
			<!-- Details -->
			<div class="ui-details clearfix">	
				<!-- Heading -->
				<h3><a href="#"><i class="fa fa-apple bg-red"></i> &nbsp;亮度</a></h3>
				<!-- Progress -->
				<a href="#" class="progress">
					<!-- Progress Bar -->
					<span class="progress-bar bg-red" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
					</span>
					<!-- Arrow -->
					<span class="ui-hover">
						<!-- Heading -->
						<span class="ui-head">亮度</span>
						<!-- Progress Reading -->
						<b>50%</b>
					</span>
				</a>
			</div>
			
			<!-- Details -->
			<div class="ui-details clearfix">	
				<!-- Heading -->
				<h3><a href="#"><i class="fa fa-dropbox bg-lblue"></i> &nbsp;渲染</a></h3>
				<!-- Progress -->
				<a href="#" class="progress">
					<!-- Progress Bar -->
					<span class="progress-bar bg-lblue" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
					</span>
					<!-- Arrow -->
					<span class="ui-hover">
						<!-- Heading -->
						<span class="ui-head">渲染</span>
						<!-- Progress Reading -->
						<b>30%</b>
					</span>
				</a>
			</div>
			
			<!-- Details -->
			<div class="ui-details clearfix">	
				<!-- Heading -->
				<h3><a href="#"><i class="fa fa-dribbble bg-yellow"></i> &nbsp;蓝光</a></h3>
				<!-- Progress -->
				<a href="#" class="progress">
					<!-- Progress Bar -->
					<span class="progress-bar bg-yellow" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
					</span>
					<!-- Arrow -->
					<span class="ui-hover">
						<!-- Heading -->
						<span class="ui-head">蓝光</span>
						<!-- Progress Reading -->
						<b>75%</b>
					</span>
				</a>
			</div>
		</div>
		<div class="yt">
    	<span>云镜控制</span>
        </div>
        <a href=""><img style="margin-left:80px;" src="imgs/yuntai.png" alt="yuntai"></a>
        <a href=""><img style="position:absolute;margin-left:-117px;margin-top:33px;" src="imgs/zuo.png" alt="zuo"></a>
        <a href=""><img style="position:absolute;margin-left:-105px;margin-top:19px;" src="imgs/shang.png" alt="shang"></a>
        <a href=""><img style="position:absolute;margin-left:-49px;margin-top:33px;" src="imgs/you.png" alt="you"></a>
        <a href=""><img style="positiona:absolute;margin-left:-103px;margin-top:73px;" src="imgs/xia.png" alt="xia"></a>
        <a href=""><img style="position:absolute;margin-left:-59px;margin-top:42px;" src="imgs/zhong.png" alt="zhong"></a>
         <div class="ui-215">
			<!-- Details -->
			<div class="ui-details clearfix">	
				<!-- Heading -->
				<h3><a href="#"><i class="fa fa-dropbox bg-lblue"></i> &nbsp;云镜速度</a></h3>
				<!-- Progress -->
				<a href="#" class="progress">
					<!-- Progress Bar -->
					<span class="progress-bar bg-lblue" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
					</span>
					<!-- Arrow -->
					<span class="ui-hover">
						<!-- Heading -->
						<span class="ui-head">云镜速度</span>
						<!-- Progress Reading -->
						<b>30%</b>
					</span>
				</a>
			</div>
		</div>
</div>
<div class="div3">
	<div class="cx">
	<span>模型</span>
	</div>
</div>
<div class="div4">
	<table id="big-box" cellspacing="0" cellpadding="0" class="table">
    <tr>
        <td><div class="box">大门</div></td>
        <td><div class="box">2</div></td>
        <td><div class="box">3</div></td>
        <td><div class="box">4</div></td>
        <td><div class="box">5</div></td>
        <td><div class="box">6</div></td>
    </tr>
</table>  
</div>
<!-- <div class="div2"></div> -->
<script src="js/jquery-1.11.3.js"></script>
<script>
    $("#big-box").on("click"," .box",function(){
            $(this).toggleClass('active');

//        $(this).parent().siblings().css('display','none');
//        console.log($(this).parent().siblings())
    });
</script>
<div class="sd_overlayBG" id="sd_overlay"></div>
<div id="cache-config" class="myweb_msg-cache">
    <h2><a href="javascript:vold(0)" title="" class="user_msg-closebtn" id="msn-cache-close">关闭</a></h2>
    <div class="msg-box-cache">
    <dl class="clearfix">
     
    </dl>
    </div>
</div>

<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script>
$(function(){    
    $("#myweb-dns-a1").bind("click",function(){
        $("#cache-config").show();
        $("#sd_overlay").show();
    })
    $("#msn-cache-close").bind("click",function(){
        $("#cache-config").hide();
        $("#sd_overlay").hide();
    })


});
</script>

</body>
</html>